<template>
  <el-container class="self">
    <el-container class="container">

      <el-header class="header" height="">
        <el-carousel class="carousel" :interval="interval" :height="carouselHeight">
          <el-carousel-item v-if="playing" class="carousel-item">
            <div class="carousel-cover">
              <video ref="home-video" muted autoplay :poster="getPath('2.jpg')" id="bgvid">
                <source :src="getPath('1.mp4')" type="video/webm">
              </video>
            </div>
          </el-carousel-item>
          <el-carousel-item class="carousel-item" v-for="(item, key) in carouselList" :key="key">
            <a :href="item.to">
              <div class="carousel-cover" :style="{'background-image': `url(${item.src})`}"></div>
            </a>
          </el-carousel-item>
        </el-carousel>
      </el-header>

      <el-main>
        <p class="shit-icon">
          <i class="el-icon-location-outline animated infinite wobble"></i>
        </p>
        <p class="shit">⼯作室主营业务介绍</p>
        <div class="business">
          <template v-if="!mobile">
            <el-card :body-style="{ padding: '0px', width: '100%' }" v-for="(item, key) in business" :key="key">
              <div class="bg" :style="{'background-image': `url(${getPath(item.cover)})`}"></div>
              <div class="cbg"></div>
              <div class="content">
                <div class="fuck">
                  <h2 class="title">{{ item.title }}</h2>
                  <h5 class="detail">{{ item.detailed }}</h5>
                </div>
              </div>
            </el-card>
          </template>
          <template v-else>
            <div class="tiny-business">
              <div class="tiny-business-item" v-for="(item, key) in tinyBusiness" :key="key">
                <img :src="getPath(item.cover)" alt="item.title">
                <p>{{ item.title }}</p>
              </div>
            </div>
          </template>
        </div>
        <div class="product">
          <p class="shit-icon">
            <i class="el-icon-location-outline animated infinite wobble"></i>
          </p>
          <p class="shit">成功案例展示</p>
          <ProductShow type="scroll" />
        </div>
        <div class="contact">
          <p class="shit-icon">
            <i class="el-icon-location-outline animated infinite wobble"></i>
          </p>
          <p class="shit">联系方式</p>
          <ContactShow />
        </div>
        <p class="shit-icon">
          <i class="el-icon-location-outline animated infinite wobble"></i>
        </p>
        <p class="shit">留言版</p>
        <Comment />
      </el-main>
    </el-container>
    <el-footer class="footer" height="64px">
      <p class="footer-copy">
        &copy;
      </p>
    </el-footer>
  </el-container>
</template>

<script>
import device from "current-device";
import ProductShow from "./ProductShow.vue";
import ContactShow from "./ContactShow.vue";
import Comment from "@/components/comment";
import getPath from "@/utils/imagePath";
import api from "@/api.js";

//import cover from "../assets/logo.png";
export default {
  name: "home",
  data() {
    return {
      interval: 100000,
      playing: true,
      carouselList: [],
      tinyBusiness: [
        {
          cover: "webdev.png",
          title: "Web开发"
        },
        {
          cover: "ui.png",
          title: "UI设计"
        },
        {
          cover: "software.png",
          title: "软件开发"
        },
        {
          cover: "android.png",
          title: "Android开发"
        }
      ],
      business: [
        {
          cover: "webdev.jpg",
          title: "网站开发",
          detailed: ""
        },
        {
          cover: "system.jpg",
          title: "信息系统开发",
          detailed: ""
        },
        {
          cover: "ui.jpg",
          title: "UI设计",
          detailed: ""
        },
        {
          cover: "app.jpg",
          title: "软件APP设计与开发",
          detailed: ""
        },
        {
          cover: "big.jpg",
          title: "企业、政府网站建设",
          detailed: ""
        }
      ]
    };
  },
  components: {
    ProductShow,
    ContactShow,
    Comment
  },
  methods: {
    getPath,
    handleVideoEnded() {
      this.playing = false;
      this.interval = 4000;
    }
  },
  computed: {
    // useCardType() {
    //   // return device.mobile() ? "" : "card";
    // },
    mobile() {
      return device.mobile();
    },
    carouselHeight() {
      return `${device.mobile() ? "380" : "600"}px`;
    }
  },
  created() {
    (async () => {
      const { data } = await api.getCarousel();
      this.carouselList = data;
    })();



    // this.$refs['home-video'].addEventListener("ended", () => {
    //   window.console.log("sadasdsadasdasdadsdasasdsdaasdsaddsa");
    // })
  },
  mounted() {
    this.$refs['home-video'].addEventListener('ended', this.handleVideoEnded);
  }
};
</script>

<style lang="scss" scoped>
@import "../assets/css/general.scss";

.self {
  padding: 0;
}
.container {
  margin: 0 auto;
  width: 100%;
}
.el-main {
  width: 100%;
  padding: 0;
}

.header {
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto 25px;
  padding: 0;

  //padding: 0 0 28px;
  padding-bottom: 28px;
  box-shadow: 0px 15px 25px -25px #222;
}
@media (orientation: portrait) {
  .header {
    padding: 0 0 36px;
    box-shadow: 0px 16px 30px -24px #222;
  }
}
.carousel-cover {
  height: 100%;
  background-size: cover;
  video {
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
  }
}
.carousel-item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.carousel-item:nth-child(2n) {
  background-color: #99a9bf;
}

.carousel-item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.business {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  background: #373d41;

  .tiny-business {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    width: 100%;
    background: #fff;

    .tiny-business-item {
      text-align: center;
      color: #222;
      padding-top: 21px;
      p {
        margin-top: 16px;
      }
      img {
        width: 50%;
      }
    }
  }
}
.business .el-card {
  display: flex;
  justify-content: center;
  box-shadow: none;
  box-sizing: border-box;
  border: none;
  height: 420px;
  width: 280px;
  /* min-width: 300px; */
  text-align: center;
  position: relative;

  &:hover .bg {
    filter: blur(12px);
  }

  .bg {
    @include full-card;
    background-size: cover;
    transition: all 0.8s;
    overflow: hidden;
    transform: scale(1.2);
  }
  .cbg {
    @include full-card;
  }
  .content {
    @include full-card;
    @include center-alignment;
    box-sizing: border-box;
    padding: 0 16px;
    font-family: sans-serif;
    color: #fff;
  }
  &:nth-child(2n) .cbg {
    background-color: #161a1dca;
  }
  &:nth-child(2n + 1) .cbg {
    background-color: #161a1d85;
  }
}

.business-cover {
  width: 240px;
  height: 240px;
  border-radius: 1000px;
  overflow: hidden;
  box-shadow: 0px 0px 30px -24px #222;
}

.product,
.contact {
  overflow: hidden;
  box-sizing: border-box;
  background: #f5f5f5;
  width: 100%;
  padding-bottom: 50px;
}
.product {
  background-color: transparent;
}

.footer {
  width: 100%;
  background-color: #909399;
}

.shit,
.shit-icon {
  text-align: center;
  font-size: 24px;
  color: #606266;
}
.shit-icon {
  font-size: 30px;
}

.footer {
  text-align: center;
}
.footer-copy {
  color: #fff;
}
</style>

